<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref, computed } from 'vue';
import type { Ref, ComputedRef } from 'vue'
import { dofinishregisterFn } from '@/api/user';

// 以 use 开头的函数是 hooks 只能在外层使用
const router = useRouter()
const psw: Ref<string> = ref('')
const password: Ref<string> = ref('')

const isClick: ComputedRef<boolean> = computed(() => {

    if (!psw.value.length) return false

    return psw.value == password.value
})


// 登录的提交事件
function onSubmit() {

    // 可以加密
    //  -----

    dofinishregisterFn({
        tel: sessionStorage.getItem('tel') || '',
        password: password.value
    }).then(res => {
        // console.log(res);
        if (res.data.code == "200") {

            // 将保存的手机号删除掉
            sessionStorage.clear()

            router.replace('/login')

        }
    })
}

</script>
<template>

    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="psw" type="password" name="密码" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <van-field v-model="password" type="password" name="确认密码" label="确认密码" placeholder="确认密码"
                :rules="[{ required: true, message: '请再次输入密码' }]" />
        </van-cell-group>
        <div style="padding: 0 20px;">
            <van-button :disabled="!isClick" style="margin: 26px 0 26px 0;" color="#f66" round block
                native-type="submit">
                注 册
            </van-button>
        </div>
    </van-form>

</template>
<style scoped lang="scss">
.back {
    float: left;
    font-size: .2rem;
    line-height: .44rem;
    padding-left: 10px;
}

.content {
    padding-top: 50px;
}
</style>